/* eslint-disable react-hooks/rules-of-hooks */
import React, { useEffect, useState } from "react";
import {
  AppstoreOutlined,
  FolderOpenOutlined,
  TeamOutlined,
  HomeOutlined,
  SettingOutlined,
  BranchesOutlined,
  NotificationOutlined,
  CarryOutOutlined,
  MailOutlined,
  InsuranceOutlined,
  FormOutlined,
  DashboardOutlined,
  FileSearchOutlined,
  FileDoneOutlined,
  FileOutlined,
  DesktopOutlined,
  DollarOutlined,
  CarOutlined,
  BellOutlined,
} from "@ant-design/icons";
import { Button, Input, Dropdown, message, Drawer } from "antd";
import type { MenuProps } from "antd";
import { Outlet, useNavigate } from "react-router-dom";
import { Layout } from "antd";

import * as service from "../api/HuangYuDong/index";
import "../styles/Index.scss";
interface Props {}

function Index(props: Props) {
  // 消息列表
  let [arr, setArr] = useState([]);
  //应用中心配置
  const items: MenuProps["items"] = [
    {
      label: (
        <div onClick={(e)=>{dianji(e)}}>
          <BranchesOutlined />
          组织
        </div>
      ),
      key: "1",
    },
    {
      label: (
        <div onClick={(e)=>{dianji(e)}}>
          <TeamOutlined />
          员工
        </div>
      ),
      key: "/index/yuangong",
    },
    {
      label: (
        <div onClick={(e)=>{dianji(e)}}>
          <CarryOutOutlined />
          考勤
        </div>
      ),
      key: "/index/attendance",
    },
    {
      label: (
        <div onClick={(e)=>{dianji(e)}}>
          <CarryOutOutlined />
          考勤
        </div>
      ),
      key: "4",
    },
    {
      label: (
        <div onClick={(e)=>{dianji(e)}}>
          <DollarOutlined />
          薪酬
        </div>
      ),
      key: "5",
    },
    {
      label: (
        <div onClick={(e)=>{dianji(e)}}>
          <InsuranceOutlined />
          社保公积金
        </div>
      ),
      key: "6",
    },
    {
      label: (
        <div onClick={(e)=>{dianji(e)}}>
          <FileDoneOutlined />
          绩效
        </div>
      ),
      key: "/index/jixiao",
    },
    {
      label: (
        <div onClick={(e)=>{dianji(e)}}>
          <NotificationOutlined />
          招聘
        </div>
      ),
      key: "8",
    },
    {
      label: (
        <div onClick={(e)=>{dianji(e)}}>
          <FormOutlined />
          审批
        </div>
      ),
      key: "9",
    },
    {
      label: (
        <div onClick={(e)=>{dianji(e)}}>
          <DesktopOutlined />
          会议室预定
        </div>
      ),
      key: "/index/huiyi",
    },
    {
      label: (
        <div onClick={(e)=>{dianji(e)}}>
          <CarOutlined />
          车辆
        </div>
      ),
      key: "11",
    },
    {
      label: (
        <div onClick={(e)=>{dianji(e)}}>
          <FileSearchOutlined />
          新闻
        </div>
      ),
      key: "12",
    },
    {
      label: (
        <div onClick={(e)=>{dianji(e)}}>
          <MailOutlined />
          公告
        </div>
      ),
      key: "13",
    },
    {
      label: (
        <div onClick={(e)=>{dianji(e)}}>
          <FileOutlined />
          合同库
        </div>
      ),
      key: "14",
    },
    {
      label: (
        <div onClick={(e)=>{dianji(e)}}>
          <FolderOpenOutlined />
          文档库
        </div>
      ),
      key: "15",
    },
    {
      label: (
        <div onClick={(e)=>{dianji(e)}}>
          <DollarOutlined />
          资产
        </div>
      ),
      key: "16",
    },
    {
      label: (
        <div onClick={(e)=>{dianji(e)}}>
          <DashboardOutlined />
          培训
        </div>
      ),
      key: "17",
    },
    {
      label: (
        <div onClick={(e)=>{dianji(e)}}>
          <SettingOutlined />
          系统设置
        </div>
      ),
      key: "18",
    },
  ];
  // 输入框
  const { Search } = Input;
  const { Header, Content } = Layout;
  const [open, setOpen] = useState(false);

let dianji=(e:any)=>{
  console.log(e.innerHTML);
  
}
  
  // 点击显示消息列表
  const showDrawer = () => {
    setOpen(true);
    service.index_hydnews().then((ok) => {
      console.log(ok.data);
      setArr(ok.data);
    });
  };
  // 点击关闭消息列表
  const onClose = () => {
    setOpen(false);
  };
  // 路由跳转

  const onClick: MenuProps["onClick"] = ({ key }) => {
    message.info(`Click on item ${key}`);
    console.log(key);
    navigate(key)
  };

  // 路由跳转
  let navigate = useNavigate();
  let tiaozhuan = () => {
    navigate("/index/shouye/workbench");
  };
  // 退出登录
  let tuichu = () => {
    navigate("/denglu");
  };
  const onSearch = (value: string) => console.log(value);
  return (
    <div className="index">
      <Layout className="index-Layout">
        <Header className="index-top">
          <h2>GLHH办公后台管理系统</h2>

          <ul>
            <li
              onClick={() => {
                tiaozhuan();
              }}
            >
              <HomeOutlined></HomeOutlined>
              首页
            </li>
            <li>
              <Dropdown
                menu={{ items, onClick }}
                placement="bottom"
                trigger={["click"]}
                className="yingyong"
              >
                <Button>
                  <AppstoreOutlined></AppstoreOutlined>
                  应用中心
                </Button>
              </Dropdown>
            </li>
          </ul>
          <Search
            placeholder="请输入关键字"
            className="input"
            onSearch={onSearch}
            style={{ width: 350 }}
          />

          <BellOutlined onClick={showDrawer} className="BellOutlined" />
          <Drawer
            title="消息通知"
            placement="right"
            onClose={onClose}
            open={open}
          >
            {arr.map((v: any, i: any) => {
              return (
                <div key={i} className="xiaoxi">
                  <p>{v.name}</p>
                  <span>{v.time}</span>
                </div>
              );
            })}
          </Drawer>
          <div
            className="tuichu"
            onClick={() => {
              tuichu();
            }}
          >
            退出登录
          </div>
        </Header>
        <Content>
          <Outlet></Outlet>
        </Content>
      </Layout>
    </div>
  );
}

export default Index;
